import { useRef } from "react";
import { PageContainer } from "@ant-design/pro-layout";
import useCommonTable from "@/hooks/useCommonTable";
import { fetchList, update } from "@/api/studentClassRecord";

import { filterCourseTypeOptions, calcWeekDay, filterTopic } from "@/const";
import {
  ModalForm,
  ProFormText,
  ProFormDigit,
  ProFormTextArea,
  ProFormTimePicker,
  ProFormDatePicker,
} from "@ant-design/pro-form";
import moment from "moment";
import { Button, Row, Col, message, Tag, Tooltip } from "antd";

export default () => {
  const actionRef = useRef();
  const formRef = useRef();

  // 补课
  const renderUpdateRecordModal = (record) => {
    const handleAddOrUpdate = async (fields) => {
      const postData = {
        studentClassRecordId: record?._id,
        studentId: record.studentId,
        classStatus: 3, // 3=补课
        isDeduct: 1, // 补课，则设置为已扣除
        remainingClassHours:
          record.remainingClassHours - fields.lessonConsumption,
        lessonConsumption: fields.lessonConsumption,
        makeupClassDateStr: `${fields.makeupClassDate} ${calcWeekDay(
          fields.makeupClassDate
        )} ${fields.makeupClassTime.join("-")}`, // 补课日期 2025/02/09 周六 08:30-10:00 格式
        remark: fields.remark,
      };
      // 直接调用排课记录的 修改记上课接口。
      const res = await update({
        id: 1,
        list: [postData],
      });
      if (res.code == 0) {
        message.success("提交补课成功");
        actionRef?.current.reload();
        return true; // 关闭弹框
      }
    };
    return (
      <ModalForm
        key="record"
        formRef={formRef}
        title="补课"
        width={800}
        initialValues={{ ...record }}
        trigger={<Button type="primary">补课</Button>}
        onFinish={async (values) => {
          return await handleAddOrUpdate(values);
        }}
      >
        <Row gutter={20}>
          <Col span={12}>
            <ProFormText disabled label="姓名" name="studentName" />
          </Col>
          <Col span={12}>
            <ProFormText disabled label="剩余课时" name="remainingClassHours" />
          </Col>
        </Row>
        <Row gutter={20}>
          <Col span={12}>
            <ProFormDatePicker
              label="补课日期"
              name="makeupClassDate"
              placeholder={"请选择补课日期"}
              fieldProps={{
                format: "YYYY/MM/DD",
              }}
              initialValue={moment()}
              rules={[
                {
                  required: true,
                  message: "请选择补课日期",
                },
              ]}
            />
          </Col>
          <Col span={12}>
            <ProFormTimePicker.RangePicker
              width="lg"
              label="补课时间"
              name="makeupClassTime"
              placeholder={["开始时间", "结束时间"]}
              fieldProps={{
                format: "HH:mm",
              }}
              rules={[
                {
                  required: true,
                  message: "请选择时间段",
                },
              ]}
            />
          </Col>
        </Row>

        <Row gutter={20}>
          <Col span={12}>
            <ProFormDigit
              label="消耗课时"
              name="lessonConsumption"
              placeholder="请输入消耗课时"
              min={1}
              max={10}
              addonAfter="课时"
              fieldProps={{
                precision: 1,
              }}
              rules={[{ required: true, message: "请输入消耗课时" }]}
            />
          </Col>
          <Col span={12}>
            <ProFormTextArea
              width="lg"
              fieldProps={{
                rows: 5,
              }}
              name="remark"
              label="备注"
              placeholder="请输入备注"
            />
          </Col>
        </Row>
      </ModalForm>
    );
  };

  const columns = [
    {
      title: "学生姓名",
      dataIndex: "studentName",
      width: 100,
    },
    {
      title: "上课时间",
      dataIndex: "classDateStr",
      width: 150,
      search: false,
    },
    {
      title: "上课状态",
      dataIndex: "classStatus",
      width: 150,
      render: (_, record) => {
        const doms = {
          1: <Tag color="#87d068">上课</Tag>,
          2: <Tag color="#f50">请假</Tag>,
          3: (
            <Tooltip title={`补课时间：${record.makeupClassDateStr}`}>
              <Tag color="#2db7f5">补课</Tag>
            </Tooltip>
          ),
        };
        return doms[record.classStatus];
      },
      search: false,
    },
    {
      title: "课程阶段",
      dataIndex: "topic",
      valueType: "select",
      render: (_, record) => {
        return filterCourseTypeOptions(record.topic[0]);
      },
      search: false,
    },
    {
      title: "课程主题",
      dataIndex: "topic",
      valueType: "select",
      render: (_, record) => {
        return record.topicType == 1
          ? filterTopic(record.topic)
          : record.topicCustom;
      },
      search: false,
    },

    {
      title: "应消耗课时",
      dataIndex: "lessonConsumption",
      search: false,
    },
    {
      title: "剩余课时",
      dataIndex: "remainingClassHours",
      search: false,
    },
  ];
  return (
    <PageContainer>
      {useCommonTable({
        actionRef,
        title: "上课记录",
        columns,
        modalWidth: "50%",
        fetchList,
        actionColumnWidth: 200,
        showCheckbox: false,
        renderAdd: () => null,
        renderShowEdit: (record, actionRef) => {
          return false;
        },
        renderOtherAction: (_, record, actionRef) => {
          // 请假才能补课
          return record.classStatus == 2
            ? renderUpdateRecordModal(record)
            : null;
        },
      })}
    </PageContainer>
  );
};
